<template>
  <div id="data" class="data" style="width: 100%;height: 700px;margin-top:10px">

  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'Data',
  props: {
    data: {
      type: Object,
      default() {
        return {
          value: ''
        };
      }
    }
  },
  data() {
    return {
      charts: ''
    };
  },
  watch: {
    barData: {
      handler(newValue) {
        this.data = newValue; // 把新值赋值给我们的属性数据
        this.drawData('data'); // 刷新echarts图表
      },
      deep: true
    }
  },
  // 调用
  mounted() {
    this.$nextTick(function() {
      this.drawData('data');
    });
  },
  methods: {
    drawData(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: this.data.name,
          left: 'center'
        },
        color: 'rgba(51, 152, 219)',
        xAxis: {
          type: 'category',
          data: this.data.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.data.data,
          type: 'bar',
          barWidth: this.data.barWidth,
          showBackground: true,
          label: {
            show: true,
            position: 'top'
          },
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      });
    }
  }
};
</script>

<style scoped>

</style>
